<template>
    <div id="app">
        <transition name="fade" mode="out-in">
          <keep-alive :max="2" include="Home,Mine">
            <component :is="coms[currentIndex]"/>
         </keep-alive>
        </transition>
        <div class="tabbar">
          <span :class="{active:currentIndex==index}" v-for="(item,index) in data"    :key="index" @click="currentIndex=index">{{item}}</span>
        </div>
      
    </div>
  </template>
  
  <script>
  import Home from'./components/Home.vue';
  import Tuan from'./components/Tuan.vue';
  import Order from'./components/Order.vue';
  import Mine from'./components/Mine.vue';
  export default {
    data(){
      return{
        currentIndex:0,
        data:['首页','爆爆团','订单','我的'],
        coms:['Home','Tuan','Order','Mine']
      }
    },
    components:{
      Home,
      Tuan,
      Order,
      Mine,
    }
  }
  </script>
  
  <style lang="scss">
  *{
    margin: 0;
    padding: 0;
  }
  .tabbar{
    font-size: 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background: #f5f5f5;
    border-top: 1px solid #888;
  }
  .tabbar .active{
    font-weight: bold;
    color:rgb(1,142,255);
  }
  .fade-enter{
    opacity: 0;
  }
  .fade-enter-active{
    transition: all 0.2s;
  }
  .fade-enter-to{
    opacity: 1;
  }
  .fade-leave{
    opacity: 1;
  }
  .fade-leave-active{
    transition: all 0.2s;
  }
  .fade-leave-to{
    opacity: 0;
  }
  </style>
  